<template>
  <!-- 供应商 -->
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="企业名称">
        <el-input size="small" v-model="formInline.enterpriseName" clearable placeholder="企业名称"></el-input>
      </el-form-item>
      <el-form-item label="负责人">
        <el-input size="small" v-model="formInline.head" clearable placeholder="负责人"></el-input>
      </el-form-item> 
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->
    <el-table :data="hrData" stripe style="width: 100%">
      <el-table-column prop="enterpriseName"  label="企业名称" width="150">
      </el-table-column>
      <el-table-column prop="unifiedSocialCreditCode" label="统一社会信用码" width="150">
      </el-table-column>
      <el-table-column prop="legalPerson" label="法人" width="150">
      </el-table-column>
      <el-table-column prop="companyAddress" label="公司地址">
      </el-table-column>
      <el-table-column prop="companyPhone" label="公司电话">
      </el-table-column>
      <el-table-column prop="head" label="负责人" width="180">
      </el-table-column>
      <el-table-column prop="headPhone" label="负责人电话">
      </el-table-column>
      <el-table-column prop="inspectionTime" label="评审时间">
      </el-table-column>
      <el-table-column prop="note" label="备注">
      </el-table-column>
      <el-table-column label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->

    <el-pagination background layout="prev, pager, next"
               @current-change="getdata"
               @prev-click="getdata"
               @next-click="getdata"
               @size-change="getdata"
               :current-page.sync="pageparm.currPage"
               :page-size.sync="pageparm.pageSize"
               :total="pageparm.total">
    </el-pagination>


    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="40%" @click='closeDialog("edit")' :append-to-body="true">
      <el-form label-width="120px" ref="editForm" :model="editForm"  >
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input size="small"  v-if="!this.IsAdd"    v-model="editForm.enterpriseName" auto-complete="off" placeholder="企业名称"></el-input>
          <el-input size="small"  v-else      disabled    v-model="editForm.enterpriseName" auto-complete="off" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="法人" prop="legalPerson">
          <el-input size="small"  v-if="!this.IsAdd"   v-model="editForm.legalPerson" auto-complete="off" placeholder="法人">     </el-input>
          <el-input size="small"   v-else      disabled     v-model="editForm.legalPerson" auto-complete="off" placeholder="法人">     </el-input>
     
        </el-form-item>
        <el-form-item label="社会统一信用码" prop="unifiedSocialCreditCode">
          <el-input size="small"  v-if="!this.IsAdd"  v-model="editForm.unifiedSocialCreditCode" placeholder="社会统一信用码"></el-input>
          <el-input size="small"  v-else      disabled   v-model="editForm.unifiedSocialCreditCode" placeholder="社会统一信用码"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" prop="companyAddress">
          <el-input size="small" v-if="!this.IsAdd"  v-model="editForm.companyAddress" placeholder="公司地址"></el-input>
          <el-input size="small"  v-else disabled v-model="editForm.companyAddress" placeholder="公司地址"></el-input>
        </el-form-item>
        <el-form-item label="公司电话" prop="companyPhone">
          <el-input size="small"  v-if="!this.IsAdd"  v-model="editForm.companyPhone" placeholder="公司电话"></el-input>
          <el-input size="small"  v-else disabled v-model="editForm.companyPhone" placeholder="公司电话"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="head">
          <el-input size="small"    v-model="editForm.head" placeholder="负责人"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话" prop="headPhone">
          <el-input size="small"    v-model="editForm.headPhone" placeholder="负责人电话"></el-input>
        </el-form-item>
        <el-form-item label="评审时间" prop="inspectionTime">
            <el-date-picker
              v-model="editForm.inspectionTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input size="small"    v-model="editForm.note" placeholder="备注"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editForm)">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { json } from 'body-parser'

export default {
  name: "supplierpage",
  data() {
    return {

 pageparm: {
  currPage: 1,
  pageSize: 3,
  total: 0,
},
      total: 1,
      IsAdd:true,
      hrData: [],
      //搜索处的数据
      userSelect: [],
      loading: false, //是显示加载
      title: '供应商',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      isAdmin: localStorage.getItem("isAdmin"),
      hr: {
        name: "",
        workNumber: "",
        phoneNumber: "",
        gender: "",
        educationBackground: "",
        entryTime: "",
        age: "",
        department: "",
        position: "",
        state: ""
      },
      
      // 请求数据参数
      formInline :{ 
        enterpriseName : "" , //企业名称
        head:""//负责人
      },
      // 编辑与添加
      editForm: {
        id:0,
        enterpriseName: "",
        legalPerson: "",
        unifiedSocialCreditCode: "",
        companyAddress: "",
        companyPhone: "",
        head: "",
        headPhone:"",
        inspectionTime: "",
        note: ""
      },
    }
  },
  methods: {
 

    // 获取数据方法
    getdata() {
      // 获取员工列表
      this.loading = false
        this.$http.post("/procure/supplier/query", {
          "supplier":this.formInline,
          "currPage": this.pageparm.currPage,
          "pageSize": this.pageparm.pageSize
        }).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            this.hrData = r.data.data.data,
            this.pageparm.total  = r.data.data.totalNums,
                console.log(this.total)
          }
        })
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.IsAdd=true;
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改供应商'
        var data = JSON.parse(JSON.stringify(row));
        this.editForm=data;
      } else {
        this.IsAdd=false;
        this.title = '添加供应商'
        this.editForm.enterpriseName="";
        this.editForm.legalPerson="";
        this.editForm.unifiedSocialCreditCode="";
        this.editForm.companyAddress="";
        this.editForm.companyPhone="";
        this.editForm.head="";
        this.editForm.headPhone="";
        this.editForm.inspectionTime="";
        this.editForm.note="";
      }
     
    },
    //搜索事件
    search() {
      this.getdata(this.formInline)
    },
    // 编辑、添加提交方法
    submitForm(editForm) {
      if (this.IsAdd) {
        this.$http.post("/procure/supplier/update", editForm).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("修改成功")
          } else {
            alert("修改失败")
          }
        })
      } else {
        this.$http.post("/procure/supplier/add", editForm).then(r => {
          console.log(r)
          if (r.data.code == 200) {
            alert("添加成功")
          } else {
            alert("添加失败")
          }
        })
      }
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },
    // 删除员工
    deleteUser(index, row) {
      console.log(row);
      this.$http.post("/manpower/del/"+row.id).then(r => {
        console.log(r)
        if (r.data.code == 200) {
          alert("删除成功")
        } else {
          alert("删除失败")
        }
      })
    }

  },
  created: function () {
    this.getdata(null);
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}
</style>